<template>
  <div style="width:100%,height:100%;padding:40px 70px;overflow-y:scroll;text-align:left">
    <section>
      <h1>Switch 开关</h1>
      <section class="markdown">
        <p>开关选择器。</p>
        <h2>何时使用</h2>
        <ul>
          <li>
            <p>需要表示开关状态/两种状态之间的切换时；</p>
          </li>
        </ul>
        <h2>代码演示</h2>
      </section>
    </section>
    <div class="button-document-code-content">
      <div class="button-document-code-content-item">
        <CodeCard :description="codeDes[0].description" :code="codeDes[0].code">
          <div style="padding: 18px; border-bottom: 1px solid #f0f0f0">
            <Switch></Switch>
          </div>
        </CodeCard>
        <CodeCard :description="codeDes[1].description" :code="codeDes[1].code">
          <div style="padding: 18px; border-bottom: 1px solid #f0f0f0">
            <Switch activeText="打开中" inactiveText="关闭"></Switch>
          </div>
        </CodeCard>
        <CodeCard :description="codeDes[2].description" :code="codeDes[2].code">
          <div style="padding: 18px; border-bottom: 1px solid #f0f0f0">
            <Switch background="orange"></Switch>
          </div>
        </CodeCard>
      </div>
      <div class="button-document-code-content-item">
        <CodeCard :description="codeDes[3].description" :code="codeDes[3].code">
          <div style="padding: 18px; border-bottom: 1px solid #f0f0f0">
            <Switch size="small"></Switch>
          </div>
        </CodeCard>
        <CodeCard :description="codeDes[4].description" :code="codeDes[4].code">
          <div style="padding: 18px; border-bottom: 1px solid #f0f0f0">
            <Switch disabled></Switch>
          </div>
        </CodeCard>
      </div>
    </div>
    <div class="vswitch-api">
      <section class="easy-markdown">
        <h2>API</h2>
        <table>
          <thead>
            <tr>
              <th>参数</th>
              <th>说明</th>
              <th>类型</th>
              <th>默认值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>check</td>
              <td>指定初始是否选中</td>
              <td>Boolean</td>
              <td>true</td>
            </tr>
            <tr>
              <td>size</td>
              <td>switch 的大小，除了值为'small'，其他字符串都为默认。small 宽高为 60*30，默认为 100*40</td>
              <td>String</td>
              <td>''</td>
            </tr>
            <tr>
              <td>background</td>
              <td>激活时的背景颜色改变</td>
              <td>String</td>
              <td>'#1890ff'</td>
            </tr>
            <tr>
              <td>activeText</td>
              <td>选中的文字，超出将会省略展示</td>
              <td>String</td>
              <td>''</td>
            </tr>
            <tr>
              <td>inactiveText</td>
              <td>未选中的文字，超出将会省略展示</td>
              <td>String</td>
              <td>''</td>
            </tr>
            <tr>
              <td>disabled</td>
              <td>是否禁止使用，值为 true 或 false</td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
          </tbody>
        </table>
      </section>
      <section class="easy-markdown">
        <h2>方法</h2>
        <table>
          <thead>
            <tr>
              <th>名称</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>onChange()</td>
              <td>开关切换变化时回调，未变化时候为 undefined</td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Switch from '/@/components/Switch/index.vue'
import CodeCard from '/@/components/CodeCard/index.vue'

export default defineComponent({
  name: 'SwitchDOM',
  props: {},
  components: {
    Switch,
    CodeCard,
  },
  setup() {
    const codeDes: Array<Record<string, string>> = [
      {
        description: '最基本的用法。',
        code: '这是一段代码',
      },
      {
        description: '开关开启和关闭文字，超出将用...代替',
        code: '这是一段代码',
      },
      {
        description: '开关激活时颜色自定义，为字符串',
        code: '这是一段代码',
      },
      {
        description: '按钮有大、小两种尺寸。通过设置 size 为 small 把按钮设为小尺寸。若不设置 size，则尺寸为大。',
        code: '这是一段代码',
      },
      {
        description: 'Switch开关 失效状态。',
        code: '这是一段代码',
      },
    ]
    return {
      codeDes,
    }
  },
})
</script>

<style lang="scss">
h1 {
  margin-top: 8px;
  margin-bottom: 20px;
}
.markdown {
  p {
    margin: 1em 0;
  }
  h2 {
    margin: 1.6em 0 0.6em;
  }
}
.button-document {
  &-code {
    &-title {
      font-size: 24px;
      padding: 8px;
    }
    &-content {
      display: flex;
      flex-wrap: wrap;
      &-item {
        margin: 8px;
        flex: 1;
      }
    }
  }
}
.vswitch-play {
  display: flex;
  .item {
    flex: 1;
    padding: 0 8px;
    .item-box {
      margin-bottom: 10px;
      border: 1px solid #f0f0f0;
      .vswitch-demo {
        height: 130px;
        line-height: 130px;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
      }
      .margin-distance {
        margin: 10px 0px;
        padding-left: 10px;
      }
    }
  }
}
.vswitch-api {
  width: 100%;
  .markdown {
    width: 100%;
  }
  margin-top: 50px;
  h2 {
    margin: 1.6em 0 0.6em;
  }
}
</style>
